<template>
    <div class="main" v-if="isShowCreate">
        <div class="title" @click="closePop">
            <div>创建项目</div>
            <i class="el-icon-close"></i>
        </div>
        <div class="input-box">
            <i class="el-icon-folder-add"></i>
            <input type="text" v-model="projectName" placeholder="项目名">
        </div>
        <div class="input-box">
            <i class="el-icon-tickets"></i>
            <textarea v-model="projectDesc" placeholder="请输入项目描述">
                </textarea>
        </div>
        <div class="project-type">
            团队:
            <el-select v-model="selectTeam" slot="prepend" placeholder="请选择">
                <el-option v-for="item in teams" :label=item.teamName :value=item.teamId></el-option>
            </el-select>
        </div>
        <div class="project-type">
            类型:
            <el-select v-model="select" slot="prepend" placeholder="请选择">
                <el-option label="JS项目" value="0"></el-option>
                <el-option label="React项目" value="1"></el-option>
                <el-option label="node项目" value="2"></el-option>
            </el-select>
        </div>
        <div class="btn" @click="addProject">
            创建
        </div>
    </div>
</template>

<script>
import { addProject } from '../api/ProjectApi.js'
export default {
    data() {
        return {
            select: '',
            // 选择的项目类型映射成类型数字
            refelctionType: {
                'JS项目': 0,
                'React项目': 1,
                'node项目': 2
            },
            projectName: '',
            projectDesc: '',
            selectTeam: '',
            teams: []
        }
    },
    props: {
        // 控制显示弹窗
        isShowCreate: {
            type: Boolean,
            default: false
        }
    },
    created() {
        this.teams = JSON.parse(localStorage.getItem('teamNameList'))
    },
    methods: {
        // 增加新项目接口
        addProject() {
            const data = {
                projectName: this.projectName,
                projectDesc: this.projectDesc,
                teamId: parseInt(this.selectTeam) || undefined,
                projectType: parseInt(this.select) || undefined,
            }
            if(!this.projectName) return this.$message.error('请填写项目名')
            if(!this.projectDesc) return this.$message.error('请填写项目描述')
            if(data.teamId === undefined) return this.$message.error('请选择归属团队')
            if(data.projectType === undefined) return this.$message.error('请选择项目类型')
            addProject(data).then(res => {
                console.log(res, '添加项目');
            })
            this.$message.success('创建成功')
            this.closePop()
        },
        // 关闭弹窗
        closePop() {
            this.$emit('close')
        }
    }

}

</script>


<style scoped>
.main {
    overflow: hidden !important;
    height: auto !important;
    background: #DCDFE6;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 11;
    width: 250px;
    border-radius: 10px;
    padding: 10px 30px 30px 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.title {
    text-align: center;
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.input-box {
    display: flex;
    border: 1px solid #EFF2FF;
    border-radius: 5px;
    margin-top: 20px;
    background: #ffff;
    align-items: center;
    padding-left: 5px;
    width: 100%;
}

.input-box input {
    flex: 1;
    border: none;
    padding: 10px;
    outline: none;
}

.input-box textarea {
    border: none;
    flex: 1;
    outline: none;
    padding: 10px;
    height: 15px;

}

.btn {
    padding: 15px 0;
    font-size: 18px;
    margin: 30px 0 0 0;
    color: #ffff;
    background: #1467cc;
    width: 100%;
    text-align: center;
    border-radius: 5px;
}

.project-type {
    margin-top: 20px;
    display: flex;
    align-items: center;
    font-size: 13px;
}
</style>